<!-- 递归调用组件 -->
<template>
  <div class="gradient-container">
    <template v-if="jsonSchemaTool.headerExist(currentNameComputed)">
      <div class="schema-node_row">
        <!-- 如果是空的节点（当父级节点是object并且没有object没有属性时显示） -->
        <template v-if="jsonSchemaTool.isEmptyObject(currentSchema)">
          <!-- 如果这个空节点的父节点是引用类型 -->
          <template v-if="parentSchemaIsRef">
            <!-- 空白填充 -->
            <p :style="{ width: jsonSchemaTool.getEmptyWidth(currentIndex, currentSchema, writable) + 'px', }"></p>
            <div class="schema-node-invalid-schema">
              <div class="schema-node-invalid-schema__no_field">引用的数据模型</div>
              <div :class="['schema-node-invalid-schema__add', { 'schema-node_disabled': !writable }]">
                {{ jsonSchemaTool.analysisSchemaRef(jsonSchema, parentSchemaIsRef.$ref).name }}
              </div>
              <div class="schema-node-invalid-schema__no_field">没有设置字段</div>
            </div>
          </template>
          <!-- 如果这个空节点的父节点不是引用类型 -->
          <template v-else>
            <!-- 空白填充 -->
            <p :style="{ width: jsonSchemaTool.getEmptyWidth(currentIndex, currentSchema, writable) + 'px', }"></p>
            <div class="schema-node-invalid-schema">
              <div class="schema-node-invalid-schema__no_field">没有字段</div>
              <div :class="['schema-node-invalid-schema__add', { 'schema-node_disabled': !writable }]"
                @click="handleAdd">
                添加</div>
            </div>
          </template>

        </template>
        <!-- 如果不是临时节点 -->
        <template v-else-if="!jsonSchemaTool.isTempNode(currentSchema)">
          <!-- 节点名称部分 -->
          <div class="schema-node_row_name">
            <!-- 空白填充 -->
            <p :style="{ width: jsonSchemaTool.getEmptyWidth(currentIndex, currentSchema, writable) + 'px', }"></p>
            <!-- 拖拽图标 鼠标浮上去显示 -->
            <div v-if="currentIndex != 1 && writable" class="schema-node_row_drag"></div>
            <div class="schema-node-field_input_bg" :class="{ 'schema-node_disabled': !writable }">
              <div class="schema-node-field_input_bg_bgItem">
                <!-- 非叶子节点展开符号 -->
                <div v-if="jsonSchemaTool.contentExist(currentSchema)" class="schema-node-expand-icon"
                  :class="{ 'schema-node-expand-icon-active': contentExpend }" @click="handleChangeExpand"></div>
                <!-- 节点名称 -->
                <div class="schema-node-text">
                  <div class="schema-node-text-wrapper">
                    <!-- 根节点 -->
                    <template
                      v-if="currentIndex == 1 && (currentNameComputed == '根节点' || currentNameComputed == 'ROOT')">
                      <el-tag size="mini">{{ $t("tool.modelManage.rootNode") }}</el-tag>
                    </template>
                    <!-- 其他已有节点或临时节点 -->
                    <template v-else>
                      <input :id="currentName + currentIndex + 'nodeNameRef'" class="schema-node-text-input"
                        :class="{ 'schema-node-input_disabled': !writable }" @focus="handleFocusName" @blur="handleBlurName"
                        :placeholder="$t('tool.others.placehoderInput')" type="text" :readonly="isReadonly"
                        :value="jsonSchemaTool.isTempNode(currentSchema) ? '' : currentNameComputed"
                        :disabled="!writable" />
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 节点类型 -->
          <div class="schema-node_row_schemaType" :class="{ 'schema-node_disabled': !writable }">
            <el-popover :ref="`type-${currentNameComputed}`" popper-class="common-popover" placement="right"
              trigger="click" @show="handleShowType(`type-${currentNameComputed}`)"
              :disabled="currentIndex == 1 && (currentNameComputed == '根节点' || currentNameComputed == 'ROOT')"
              @after-enter="showPopover(`${currentNameComputed}FormRef`)">
              <!-- 如果节点是引用类型 -->
              <template v-if="jsonSchemaTool.isComplexType(currentSchema, 2)">
                <TypeForm :ref="`${currentNameComputed}FormRef`" :popoverRef="`typeSenior-${currentNameComputed}`"
                  :formRef="`${currentNameComputed}FormRef`" :parentSchema.sync="parentSchemaComputed"
                  :currentSchema.sync="currentSchema" :isGlobalModule="isGlobalModule" :currentIndex="currentIndex"
                  :currentName="currentNameComputed" :isArrayItems="'common'" :treeData="treeData"
                  :globalTreeData="globalTreeData" @updatePopoverPos="updatePopoverPos"
                  @updateSchemaContent="updateSchemaContent" @updateSchemaWhenQuote="updateSchemaWhenQuote"
                  @updateSchemaStructure="handleChangeType">
                </TypeForm>
              </template>
              <!-- 如果节点不是引用类型 -->
              <template v-else>
                <el-menu
                  @select="(index) => handleChangeType(index, `type-${currentNameComputed}`, `typeSenior-${currentNameComputed}`, `${currentNameComputed}FormRef`)"
                  :default-active="jsonSchemaTool.getOriginalType(currentSchema)">
                  <el-menu-item v-for="(item, index) in list3" :index="item.value" :key="item.id">
                    {{ item.name }}
                  </el-menu-item>
                </el-menu>
              </template>


              <div slot="reference" class="schema-node-schema-type_typeSelect"
                :style="{ cursor: !writable || isReadonly ? 'not-allowed' : 'pointer' }">
                <span :class="jsonSchemaTool.getTypeTextColor(currentSchema) + '-text'">
                  {{
                    jsonSchemaTool.getTypeTextColor(currentSchema) == "ref" ?
                      jsonSchemaTool.analysisSchemaRef(jsonSchema, currentSchema.$ref).name :
                      jsonSchemaTool.getTypeTextColor(currentSchema)
                  }}
                  <span v-if="currentSchema.format" :title="currentSchema.format">{{ "<" + currentSchema.format + ">"
                      }}</span>
                  </span>
              </div>
            </el-popover>
            <template v-if="!isReadonly">
              <!-- 必填按钮 -->
              <div v-if="currentIndex != 1" class="schema-node-schema-type_required" :class="[
                jsonSchemaTool.isRequired(parentSchema, currentNameComputed)
                  ? 'schema-type_checked-btn'
                  : '',
                parentSchema.type == 'array' ? 'schema-node_disabled' : '',
              ]" :style="{ cursor: !writable ? 'not-allowed' : 'pointer' }" @click="handleRequired">
                <div class="schema-node-schema-check_box">
                  <span role="img" class="appIcon">
                    <svg-icon :color="jsonSchemaTool.isRequired(parentSchema, currentNameComputed)
                      ? '#f04438'
                      : '#798294'
                      " icon-class="required" width="18" height="18" />
                  </span>
                </div>
              </div>
              <!-- 允许为NULL按钮 -->
              <div v-if="jsonSchemaTool.displayIsNullAble(currentSchema)" :class="['schema-node-schema-type_nullable', 'schema-node-schema-check_box',
                { 'schema-type_checked-btn': jsonSchemaTool.isNullAble(currentSchema) }]"
                @click="handleNullAble(false)" :style="{ cursor: !writable ? 'not-allowed' : 'pointer' }">
                <span role="img" class="appIcon">
                  <svg-icon :color="jsonSchemaTool.isNullAble(currentSchema) ? '#f04438' : '#798294'"
                    icon-class="allow-null" width="12" height="12" />
                </span>
              </div>
              <!-- 高级设置按钮（如果当前节点是 引用类型或者number或者integer类型才显示高级设置按钮） -->
              <el-popover v-if="writable" :ref="`typeSenior-${currentNameComputed}`" placement="right" trigger="click"
                @after-enter="showPopover(`${currentNameComputed}FormRef`)"
                @hide="hidePopover(`${currentNameComputed}FormRef`)">
                <div class="jsonschema-advance-setting">
                  <div class="js-a-s-content">
                    <TypeForm :ref="`${currentNameComputed}FormRef`" :popoverRef="`typeSenior-${currentNameComputed}`"
                      :formRef="`${currentNameComputed}FormRef`" :parentSchema.sync="parentSchemaComputed"
                      :currentSchema.sync="currentSchema" :isGlobalModule="isGlobalModule" :currentIndex="currentIndex"
                      :currentName="currentNameComputed" :isArrayItems="'common'" :treeData="treeData"
                      :globalTreeData="globalTreeData" @updatePopoverPos="updatePopoverPos"
                      @updateSchemaContent="updateSchemaContent" @updateSchemaWhenQuote="updateSchemaWhenQuote"
                      @updateSchemaStructure="handleChangeType">
                    </TypeForm>
                  </div>
                </div>

                <div v-if="jsonSchemaTool.displayAdvanced(currentSchema)" slot="reference"
                  class="schema-node-type_morder-type">
                  <el-tooltip content="高级设置" placement="top">
                    <div class="schema-node-schema-check_box">
                      <span role="img" class="appIcon">
                        <svg-icon icon-class="advanced-setting" width="14" height="14" />
                      </span>
                    </div>
                  </el-tooltip>
                </div>

                <div v-else slot="reference" style="width: 0px; height: 0px;"></div>
              </el-popover>
            </template>

          </div>
          <!-- 中文名部分 -->
          <div class="schema-node-row_title" :class="{ 'schema-node_disabled': !writable }">
            <div class="schema-node-text">
              <div class="schema-node-text-wrapper">
                <input class="schema-node-text-input" :class="{ 'schema-node-input_disabled': !writable }"
                  :placeholder="$t('tool.modelManage.title')" type="text" :value="currentSchema.title"
                  :readonly="isReadonly" :disabled="!writable" @focus="handleFocusText($event, 'title', 'common')"
                  @blur="handleBlurText($event, 'title', 'common')" />
              </div>
            </div>
          </div>
          <!-- 说明部分 -->
          <div class="schema-node-row_description" :class="{ 'schema-node_disabled': !writable }">
            <div class="schema-node-text">
              <div class="schema-node-text-wrapper">
                <input class="schema-node-text-input" :class="{ 'schema-node-input_disabled': !writable }"
                  :placeholder="$t('tool.modelManage.description')" type="text" :value="currentSchema.description"
                  :readonly="isReadonly" :disabled="!writable" @focus="handleFocusText($event, 'description', 'common')"
                  @blur="handleBlurText($event, 'description', 'common')" />
              </div>
            </div>
          </div>
          <!-- 操作按钮部分 -->
          <div v-if="!isReadonly" class="schema-node-row_operation" :class="{ 'schema-node_disabled': !writable }">
            <!-- 新增按钮 -->
            <template v-if="
              (currentIndex != 1 && writable) ||
              (currentIndex == 1 &&
                jsonSchemaTool.isComplexType(currentSchema, 1, 2))
            ">
              <!-- 相邻节点、子节点、引用模型 -->
              <el-popover v-if="jsonSchemaTool.hasAllAddNode(currentSchema, currentIndex)" placement="bottom-start"
                title="" trigger="hover" :visible-arrow="false">
                <div class="dropdown-menu">
                  <div class="menu-item mx-1" v-for="ele in list1" :key="ele.id" @click="handleMenuClick(ele.id)">
                    {{ ele.name }}
                  </div>
                </div>

                <div slot="reference" class="operation-btn dropdown-trigger-add">
                  <span role="img" class="appIcon" style="margin-right: 5px">
                    <svg-icon icon-class="new" width="18" height="18" @click="handleMenuClick(2)" />
                  </span>
                </div>
              </el-popover>
              <!-- 相邻节点、引用模型 -->
              <el-popover v-else-if="
                jsonSchemaTool.hasAddAdjacentNode(currentSchema, currentIndex)
              " placement="bottom-end" title="" trigger="hover">
                <div class="dropdown-menu">
                  <div class="menu-item mx-1" v-for="ele in list6" :key="ele.id" @click="handleMenuClick(ele.id)">
                    {{ ele.name }}
                  </div>
                </div>

                <div slot="reference" class="operation-btn dropdown-trigger-add">
                  <span role="img" class="appIcon" style="margin-right: 5px">
                    <svg-icon icon-class="new" width="18" height="18" @click="handleMenuClick(1)" />
                  </span>
                </div>
              </el-popover>
              <!-- 子节点、引用模型 -->
              <el-popover v-else-if="
                jsonSchemaTool.hasAddChildNode(currentSchema, currentIndex)
              " placement="top-end" title="" trigger="hover">
                <div class="dropdown-menu">
                  <div class="menu-item mx-1" v-for="ele in list7" :key="ele.id" @click="handleMenuClick(ele.id)">
                    {{ ele.name }}
                  </div>
                </div>
                <div slot="reference" class="operation-btn dropdown-trigger-add">
                  <span role="img" class="appIcon" style="margin-right: 5px">
                    <svg-icon icon-class="new" width="18" height="18" @click="handleMenuClick(2)" />
                  </span>
                </div>
              </el-popover>
            </template>
            <div v-else style="width: 24px; height: 24px"></div>
            <!-- 删除按钮 -->
            <div v-if="currentIndex != 1 && writable" class="operation-btn dropdown-trigger-delete"
              @click="handleDeleteNode">
              <span role="img" class="appIcon" style="margin-right: 5px">
                <svg-icon :icon-class="clickDel ? 'del' : 'minus'" width="18" height="18" />
              </span>
            </div>
            <div v-else style="width: 24px; height: 24px"></div>
          </div>
        </template>
        <!-- 如果是临时节点 -->
        <template v-else>
          <!-- 节点名称部分 -->
          <div class="schema-node_row_name">
            <!-- 空白填充 -->
            <p :style="{ width: jsonSchemaTool.getEmptyWidth(currentIndex, currentSchema, writable) + 'px', }"></p>
            <!-- 拖拽图标 鼠标浮上去显示 -->
            <div v-if="currentIndex != 1 && writable" class="schema-node_row_drag"></div>
            <div class="schema-node-field_input_bg" :class="{ 'schema-node_disabled': !writable }">
              <div class="schema-node-field_input_bg_bgItem">
                <!-- 节点名称 -->
                <div class="schema-node-text">
                  <div class="schema-node-text-wrapper">
                    <input :id="currentName + currentIndex + 'nodeNameRef'" class="schema-node-text-input"
                      :class="{ 'schema-node-input_disabled': !writable }" @focus="handleFocusName" @blur="handleBlurName"
                      :placeholder="$t('tool.others.placehoderInput')" type="text" :readonly="isReadonly"
                      :value="jsonSchemaTool.isTempNode(currentSchema) ? '' : currentNameComputed"
                      :disabled="!writable" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 或引用数据模型部分 -->
          <div class="schema-node-refer-to-schema">
            <div class="schema-node-refer-to-schema__or">或</div>
            <div :class="['schema-node-refer-to-schema__refer', { 'schema-node_disabled': !writable }]"
              @click="handleShowReferenceDialog">引用数据模型</div>
          </div>
          <!-- 操作按钮部分 -->
          <div v-if="!isReadonly" class="schema-node-row_operation" :class="{ 'schema-node_disabled': !writable }">
            <!-- 更多按钮 -->
            <!-- <el-popover v-if="
              jsonSchemaTool.hasMoreBtn(currentSchema, currentIndex) && writable
            " placement="bottom-end" title="" trigger="hover" :visible-arrow="false">
              <div class="dropdown-menu">
                <div class="menu-item mx-1" v-for="ele in list2" :key="ele.id" @click="dataModelExtract()">
                  <div class="flex items-center">
                    <span role="img" class="appIcon" style="margin-right: 5px">
                      <svg-icon class="theme-text-color" :icon-class="ele.icon" width="16" height="16" />
                    </span>
                    {{ $t("tool.modelManage." + ele.i18nName) }}
                  </div>
                </div>
              </div>

              <div slot="reference" class="operation-btn dropdown-trigger">
                <span role="img" class="appIcon" style="margin-right: 5px">
                  <svg-icon icon-class="operation" width="18" height="18" />
                </span>
              </div>
            </el-popover>
            <div v-else style="width: 24px; height: 24px"></div> -->
            <!-- 新增按钮 -->
            <template v-if="
              (currentIndex != 1 && writable) ||
              (currentIndex == 1 &&
                jsonSchemaTool.isComplexType(currentSchema, 1, 2))
            ">
              <!-- 相邻节点、子节点、引用模型 -->
              <el-popover v-if="jsonSchemaTool.hasAllAddNode(currentSchema, currentIndex)" placement="bottom-start"
                title="" trigger="hover" :visible-arrow="false">
                <div class="dropdown-menu">
                  <div class="menu-item mx-1" v-for="ele in list1" :key="ele.id" @click="handleMenuClick(ele.id)">
                    {{ ele.name }}
                  </div>
                </div>

                <div slot="reference" class="operation-btn dropdown-trigger-add">
                  <span role="img" class="appIcon" style="margin-right: 5px">
                    <svg-icon icon-class="new" width="18" height="18" @click="handleMenuClick(2)" />
                  </span>
                </div>
              </el-popover>
              <!-- 相邻节点、引用模型 -->
              <el-popover v-else-if="
                jsonSchemaTool.hasAddAdjacentNode(currentSchema, currentIndex)
              " placement="bottom-end" title="" trigger="hover">
                <div class="dropdown-menu">
                  <div class="menu-item mx-1" v-for="ele in list6" :key="ele.id" @click="handleMenuClick(ele.id)">
                    {{ ele.name }}
                  </div>
                </div>

                <div slot="reference" class="operation-btn dropdown-trigger-add">
                  <span role="img" class="appIcon" style="margin-right: 5px">
                    <svg-icon icon-class="new" width="18" height="18" @click="handleMenuClick(1)" />
                  </span>
                </div>
              </el-popover>
              <!-- 子节点、引用模型 -->
              <el-popover v-else-if="
                jsonSchemaTool.hasAddChildNode(currentSchema, currentIndex)
              " placement="top-end" title="" trigger="hover">
                <div class="dropdown-menu">
                  <div class="menu-item mx-1" v-for="ele in list7" :key="ele.id" @click="handleMenuClick(ele.id)">
                    {{ ele.name }}
                  </div>
                </div>
                <div slot="reference" class="operation-btn dropdown-trigger-add">
                  <span role="img" class="appIcon" style="margin-right: 5px">
                    <svg-icon icon-class="new" width="18" height="18" @click="handleMenuClick(2)" />
                  </span>
                </div>
              </el-popover>
            </template>
            <div v-else style="width: 24px; height: 24px"></div>
            <!-- 删除按钮 -->
            <div v-if="currentIndex != 1 && writable" class="operation-btn dropdown-trigger-delete"
              @click="handleDeleteNode">
              <span role="img" class="appIcon" style="margin-right: 5px">
                <svg-icon :icon-class="clickDel ? 'del' : 'minus'" width="18" height="18" />
              </span>
            </div>
            <div v-else style="width: 24px; height: 24px"></div>
          </div>
        </template>

      </div>
    </template>
    <template
      v-if="jsonSchemaTool.contentExist(currentSchema) && (contentExpend || !jsonSchemaTool.headerExist(currentNameComputed))">
      <!-- 当前节点的类型为array -->
      <template v-if="jsonSchemaTool.isComplexType(currentSchema, 0)">
        <div class="schema-node_row" :key="`key-${currentIndex}-${new Date().getTime()}`">
          <div class="schema-node_row_name">
            <!-- 空白填充 -->
            <p :style="{
              width:
                jsonSchemaTool.getEmptyWidth(
                  currentIndex + 1,
                  currentSchema,
                  writable,
                  'item'
                ) + 'px',
            }"></p>
            <div class="schema-node-field_input_bg" :class="{ 'schema-node_disabled': !writable }">
              <div class="schema-node-field_input_bg_bgItem">
                <!-- 非叶子节点节点展开符号 -->
                <div v-if="
                  jsonSchemaTool.isComplexType(currentSchema.items, 0, 1, 4) ||
                  currentSchema.items.$ref
                " class="schema-node-expand-icon" :class="{ 'schema-node-expand-icon-active': itemExpand }"
                  @click="itemExpand = !itemExpand"></div>
                <!-- 节点名称 -->
                <div class="schema-node-text">
                  <div class="schema-node-text-wrapper">
                    <el-tag size="mini">ITEM</el-tag>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 节点类型 -->
          <div class="schema-node_row_schemaType">
            <el-popover :ref="`type-item-${currentNameComputed}`" popper-class="common-popover" placement="right"
              trigger="click" @show="handleShowType(`type-item-${currentNameComputed}`)">

              <template v-if="jsonSchemaTool.getTypeTextColor(currentSchema.items) == 'ref'">
                <TypeForm :ref="`${currentNameComputed}FormRef-items`"
                  :popoverRef="`typeSenior-items-${currentNameComputed}`"
                  :formRef="`${currentNameComputed}FormRef-items`" :parentSchema.sync="parentSchemaComputed"
                  :currentSchema.sync="currentSchemaComputed.items" :currentIndex="currentIndex"
                  :isGlobalModule="isGlobalModule" :currentName="currentNameComputed" :isArrayItems="'item'"
                  :treeData="treeData" :globalTreeData="globalTreeData" @updatePopoverPos="updatePopoverPos"
                  @updateSchemaContent="updateSchemaContent" @updateSchemaWhenQuote="updateSchemaWhenQuote"
                  @updateSchemaStructure="handleChangeType">
                </TypeForm>
              </template>

              <template v-else>
                <el-menu
                  @select="(index) => handleChangeType(index, `type-item-${currentNameComputed}`, `typeSenior-items-${currentNameComputed}`, `${currentNameComputed}FormRef-items`)"
                  :default-active="jsonSchemaTool.getOriginalTypeWhenTypeIncludeMulti(currentSchema.items.type)">
                  <el-menu-item v-for="(item, index) in list3" :index="item.value" :key="item.id">
                    {{ item.name }}
                  </el-menu-item>
                </el-menu>
              </template>

              <div slot="reference" class="schema-node-schema-type_typeSelect"
                :style="{ cursor: !writable || isReadonly ? 'not-allowed' : 'pointer' }">
                <span :class="jsonSchemaTool.getTypeTextColor(currentSchema.items) +
                  '-text'
                  ">
                  <span>
                    {{
                      jsonSchemaTool.getTypeTextColor(currentSchema.items) == "ref"
                        ? jsonSchemaTool.analysisSchemaRef(jsonSchema, currentSchema.items.$ref).name
                        : jsonSchemaTool.getTypeTextColor(currentSchema.items)
                    }}
                  </span>
                  <span v-if="currentSchema.items.format" :title="currentSchema.items.format">{{ "<" +
                    currentSchema.items.format + ">" }} </span>
                  </span>
              </div>
            </el-popover>
            <template v-if="!isReadonly">
              <!-- 必填按钮 -->
              <div :class="['schema-node-schema-type_required', 'schema-node-schema-check_box']">
                <span role="img" :class="['appIcon', 'schema-node_disabled']">
                  <svg-icon :color="jsonSchemaTool.isRequired(
                    currentSchema,
                    currentNameComputed
                  )
                    ? '#f04438'
                    : '#798294'
                    " icon-class="required" width="18" height="18" />
                </span>
              </div>
              <!-- 允许为NULL按钮 (如果当前节点是 引用模型或者any或者null类型时不显示NULL按钮) -->
              <div v-if="jsonSchemaTool.displayIsNullAble(currentSchema.items)" :class="['schema-node-schema-type_nullable', 'schema-node-schema-check_box',
                { 'schema-type_checked-btn': jsonSchemaTool.isNullAble(currentSchema.items) }]"
                @click="handleNullAble(true)" :style="{ cursor: !writable ? 'not-allowed' : 'pointer' }">
                <span role="img" class="appIcon">
                  <svg-icon :color="jsonSchemaTool.isNullAble(currentSchema.items) ? '#f04438' : '#798294'"
                    icon-class="allow-null" width="12" height="12" />
                </span>
              </div>
              <!-- 高级设置按钮（如果当前节点是 引用类型或者number或者integer类型才显示高级设置按钮） -->
              <el-popover :ref="`typeSenior-items-${currentNameComputed}`"
                popper-class="common-popover dataType-popover" placement="right" trigger="click" title="数据类型"
                slot="reference" @after-enter="
                  showPopover(`${currentNameComputed}FormRef-items`)
                  " @hide="hidePopover(`${currentNameComputed}FormRef-items`)">
                <TypeForm :ref="`${currentNameComputed}FormRef-items`"
                  :popoverRef="`typeSenior-items-${currentNameComputed}`"
                  :formRef="`${currentNameComputed}FormRef-items`" :parentSchema.sync="parentSchemaComputed"
                  :currentSchema.sync="currentSchemaComputed.items" :currentIndex="currentIndex"
                  :isGlobalModule="isGlobalModule" :currentName="currentNameComputed" :isArrayItems="'item'"
                  :treeData="treeData" :globalTreeData="globalTreeData" @updatePopoverPos="updatePopoverPos"
                  @updateSchemaContent="updateSchemaContent" @updateSchemaWhenQuote="updateSchemaWhenQuote"
                  @updateSchemaStructure="handleChangeType">
                </TypeForm>

                <div v-if="jsonSchemaTool.displayAdvanced(currentSchemaComputed.items)" slot="reference"
                  class="schema-node-type_morder-type">
                  <el-tooltip content="高级设置" placement="top">
                    <div class="schema-node-schema-check_box">
                      <span role="img" class="appIcon">
                        <svg-icon icon-class="advanced-setting" width="14" height="14" />
                      </span>
                    </div>
                  </el-tooltip>
                </div>

                <div v-else slot="reference" style="width: 0px; height: 0px;"></div>
              </el-popover>

            </template>
          </div>
          <!-- 中文名部分 -->
          <!-- <div class="schema-node-row_title">
            <div class="schema-node-text">
              <div class="schema-node-text-wrapper">
                <input class="schema-node-text-input" :class="{ 'schema-node-input_disabled': !writable }"
                  :placeholder="$t('tool.modelManage.title')" type="text" :value="currentSchema.items.title"
                  :disabled="!writable" @focus="handleFocusText($event, 'title', 'item')"
                  @blur="handleBlurText($event, 'title', 'item')" />
              </div>
            </div>
          </div> -->
          <!-- 说明部分 -->
          <!-- <div class="schema-node-row_description">
            <div class="schema-node-text">
              <div class="schema-node-text-wrapper">
                <input class="schema-node-text-input" :class="{ 'schema-node-input_disabled': !writable }"
                  :placeholder="$t('tool.modelManage.description')" type="text" :value="currentSchema.items.description"
                  :readonly="isReadonly" :disabled="!writable" @focus="handleFocusText($event, 'description', 'item')"
                  @blur="handleBlurText($event, 'description', 'item')" />
              </div>
            </div>
          </div> -->

          <!-- 中文名部分 -->
          <div class="schema-node-row_title">
            <div class="schema-node-text">
              <div class="schema-node-text-wrapper">
                <input class="schema-node-text-input schema-node-input_disabled" value="ITEM" disabled="disabled" />
              </div>
            </div>
          </div>
          <!-- 说明部分 -->
          <div class="schema-node-row_description">
            <div class="schema-node-text">
              <div class="schema-node-text-wrapper">
                <input class="schema-node-text-input schema-node-input_disabled" value="ITEM" disabled="disabled" />
              </div>
            </div>
          </div>
          <!-- 操作按钮部分 -->
          <div v-if="!isReadonly" class="schema-node-row_operation">
            <!-- 更多按钮 -->
            <!-- <el-popover v-if="
              jsonSchemaTool.hasMoreBtn(
                currentSchema.items,
                currentIndex,
                true
              ) && writable
            " placement="bottom-end" title="" trigger="hover" :visible-arrow="false">
              <div class="dropdown-menu">
                <div class="menu-item mx-1" v-for="ele in list2" :key="ele.id" @click="dataModelExtract()">
                  <div class="flex items-center">
                    <span role="img" class="appIcon" style="margin-right: 5px">
                      <svg-icon class="theme-text-color" :icon-class="ele.icon" width="16" height="16" />
                    </span>
                  </div>
                  {{ $t("tool.modelManage." + ele.i18nName) }}
                </div>
              </div>

              <div slot="reference" class="operation-btn dropdown-trigger">
                <span role="img" class="appIcon" style="margin-right: 5px">
                  <svg-icon icon-class="operation" width="18" height="18" />
                </span>
              </div>
            </el-popover>
            <div v-else style="width: 24px; height: 24px"></div> -->
            <!-- 新增按钮，新增子节点 -->
            <el-popover v-if="jsonSchemaTool.hasAddBtn(currentSchema.items) && writable" placement="top-end" title=""
              trigger="hover">
              <div class="dropdown-menu">
                <div class="menu-item mx-1" v-for="ele in list7" :key="ele.id" @click="handleMenuClick(ele.id)">
                  {{ ele.name }}
                </div>
              </div>

              <div slot="reference" class="operation-btn dropdown-trigger-add">
                <span role="img" class="appIcon" style="margin-right: 5px">
                  <svg-icon icon-class="new" width="18" height="18" @click="handleMenuClick(2)" />
                </span>
              </div>
            </el-popover>
            <div v-else style="width: 24px; height: 24px"></div>
            <!-- 删除按钮 -->
            <div style="width: 24px; height: 24px"></div>
          </div>
        </div>
        <Gradient v-if="jsonSchemaTool.contentExist(currentSchema.items) && itemExpand"
          :currentSchema.sync="currentSchema.items" :parentSchema.sync="currentSchemaComputed" :curNode="curNode"
          :isGlobalModule="isGlobalModule" :treeData="treeData" :globalTreeData="globalTreeData"
          :currentIndex="currentIndex + 1" :writable="writable" :isReadonly="isReadonly" :modelDataList="modelDataList">
        </Gradient>
      </template>
      <!-- 当前节点的类型为object -->
      <template v-if="jsonSchemaTool.isComplexType(currentSchema, 1)">
        <draggable v-model="dragableArr" :group="currentNameComputed" chosenClass="chosend" forceFallback="true"
          :handle="'.schema-node_row_drag'" :sort="true" animation="500" @start="dragStart" @update="dragUpdate"
          :move="dragMove" @end="dragEnd">
          <!-- 如果对象有子属性 -->
          <transition-group v-if="dragableArr.length > 0">
            <template v-for="property in dragableArr">
              <!-- 对象中含有引用类型 -->
              <template
                v-if="jsonSchemaTool.schemaPropertiesRef(currentSchemaComputed, property)['value']['$ref'] != undefined">
                <!-- 引用和对象自有属性在同一层级 -->
                <Gradient v-if="jsonSchemaTool.schemaPropertiesRef(currentSchemaComputed, property)['sign'] == 1"
                  :key="property + 'Ref'" :currentName="undefined" :currentSchema="jsonSchemaTool.schemaPropertiesRef(
                    currentSchemaComputed, property)['value']" :parentSchema.sync="currentSchemaComputed"
                  :curNode="curNode" :isGlobalModule="isGlobalModule" :treeData="treeData"
                  :globalTreeData="globalTreeData" :currentIndex="currentIndex" :writable="writable"
                  :isReadonly="isReadonly" :modelDataList="modelDataList">
                </Gradient>
                <!-- 对象的自有属性有引用，不在同一层级 -->
                <Gradient v-else :key="property" :currentName="property" :currentSchema="jsonSchemaTool.schemaPropertiesRef(
                  currentSchemaComputed, property)['value']" :parentSchema.sync="currentSchemaComputed"
                  :curNode="curNode" :isGlobalModule="isGlobalModule" :treeData="treeData"
                  :globalTreeData="globalTreeData" :currentIndex="currentIndex + 1" :writable="writable"
                  :isReadonly="isReadonly" :modelDataList="modelDataList"></Gradient>
              </template>
              <!-- 对象中其他普通类型 -->
              <Gradient v-else :key="property" :currentName="property"
                :currentSchema.sync="currentSchema.properties[property]" :parentSchema.sync="currentSchemaComputed"
                :curNode="curNode" :isGlobalModule="isGlobalModule" :treeData="treeData"
                :globalTreeData="globalTreeData" :currentIndex="currentIndex + 1" :writable="writable"
                :isReadonly="isReadonly" :modelDataList="modelDataList">
              </Gradient>
            </template>
          </transition-group>
          <!-- 对象没有子属性 -->
          <transition-group v-else>
            <Gradient :key="Math.random()" :currentName="Math.random().toString()" :currentSchema="{}"
              :parentSchema.sync="currentSchemaComputed" :curNode="curNode" :isGlobalModule="isGlobalModule"
              :treeData="treeData" :globalTreeData="globalTreeData" :currentIndex="currentIndex + 1"
              :writable="writable" :isReadonly="isReadonly" :modelDataList="modelDataList"
              :parentSchemaIsRef="parentSchemaIsRef">
            </Gradient>
          </transition-group>

        </draggable>
      </template>
      <!-- 当前节点的类型为ref引用 -->
      <template v-if="jsonSchemaTool.isComplexType(currentSchema, 2)">
        <div class="ref-wrapper" :id="`ref-wrapper-${currentIndex}-${new Date().getTime()}`">
          <Gradient :currentSchema="jsonSchemaTool.analysisSchemaRef(jsonSchema, currentSchema['$ref'])['value']"
            :parentSchema="jsonSchemaTool.analysisSchemaRef(jsonSchema, currentSchema['$ref'])['value']"
            :curNode="curNode" :isGlobalModule="isGlobalModule" :treeData="treeData" :globalTreeData="globalTreeData"
            :currentIndex="currentIndex" :writable="false" :isReadonly="isReadonly" :modelDataList="modelDataList"
            :parentSchemaIsRef="currentSchema"></Gradient>
          <div class="quote-header">
            <el-popover popper-class="common-popover" placement="top" title="去编辑该数据模型" trigger="hover">
              <div slot="reference" class="quote-header-item" @click="handleEditSchema">
                <span style="display: flex; align-items: center">
                  <span role="img" class="appIcon">
                    <svg-icon class="theme-text-color" icon-class="model" width="14" height="14" />
                  </span>
                </span>
                <span style="display: block; height: 100%" class="loc-center">
                  {{ jsonSchemaTool.analysisSchemaRef(jsonSchema, currentSchema.$ref).name }}
                </span>
                <span style="display: flex; align-items: center">
                  <span role="img" class="appIcon">
                    <svg-icon class="theme-text-color" icon-class="quote-share" width="14" height="14" />
                  </span>
                </span>
              </div>
            </el-popover>
            <el-popover v-if="writable" popper-class="common-popover" placement="top" title="解除关联后可修改内容"
              trigger="hover">
              <div v-if="!isReadonly" slot="reference" class="quote-header-item" @click="removeRef">
                解除关联
              </div>
            </el-popover>
            <div class="quote-header-item" style="margin-right: 0px" v-if="
              currentSchemaComputed['x-apifox-overrides'] != undefined ||
              parentSchemaComputed['x-apifox-refs'] != undefined
            " @click="handleDeleteRef">
              删除
            </div>
          </div>
          <div class="quote-box" id="quote-box"></div>
          <div v-if="writable" class="quote-drag schema-node_row_drag" id="quote-drag"></div>
        </div>
      </template>
      <!-- 当前节点的类型为字典 -->
      <template v-if="jsonSchemaTool.isComplexType(currentSchema, 4)">

        <div class="schema-node_row" :key="`key-${currentIndex}-${new Date().getTime()}`">
          <div class="schema-node_row_name">
            <!-- 空白填充 -->
            <p :style="{
              width:
                jsonSchemaTool.getEmptyWidth(
                  currentIndex + 2,
                  currentSchema,
                  writable,
                  'key'
                ) + 'px',
            }"></p>
            <div class="schema-node-field_input_bg" :class="{ 'schema-node_disabled': !writable }">
              <div class="schema-node-field_input_bg_bgItem">
                <!-- 节点名称 -->
                <div class="schema-node-text">
                  <div class="schema-node-text-wrapper">
                    <el-tag size="mini">K</el-tag>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 节点类型 -->
          <div class="schema-node_row_schemaType">
            <el-popover :ref="`type-key-${currentNameComputed}`" popper-class="common-popover" placement="right"
              trigger="click" @show="handleShowType(`type-key-${currentNameComputed}`)">
              <el-menu
                @select="(index) => handleChangeType(index, `type-key-${currentNameComputed}`, `typeSenior-key-${currentNameComputed}`, `${currentNameComputed}FormRef-key`)"
                :default-active="jsonSchemaTool.getDictKeyAndValueType(currentSchema).keyType">
                <el-menu-item v-for="(item, index) in list3.filter((item) => ['string', 'integer'].includes(item.name))"
                  :index="item.value" :key="item.id">
                  {{ item.name }}
                </el-menu-item>
              </el-menu>
              <div slot="reference" class="schema-node-schema-type_typeSelect"
                :style="{ cursor: !writable ? 'not-allowed' : 'pointer' }">
                <span :class="jsonSchemaTool.getDictKeyAndValueType(currentSchema).keyType + '-text'">
                  {{ jsonSchemaTool.getDictKeyAndValueType(currentSchema).keyType }}
                </span>
              </div>
            </el-popover>
          </div>

          <!-- 中文名部分 -->
          <div class="schema-node-row_title">
            <div class="schema-node-text">
              <div class="schema-node-text-wrapper">
                <input class="schema-node-text-input schema-node-input_disabled" value="KEY" disabled="disabled" />
              </div>
            </div>
          </div>
          <!-- 说明部分 -->
          <div class="schema-node-row_description">
            <div class="schema-node-text">
              <div class="schema-node-text-wrapper">
                <input class="schema-node-text-input schema-node-input_disabled" value="KEY" disabled="disabled" />
              </div>
            </div>
          </div>
          <!-- 操作按钮部分 -->
          <div class="schema-node-row_operation">
            <!-- 更多按钮 -->
            <div style="width: 24px; height: 24px"></div>
            <!-- 新增按钮 -->
            <div style="width: 24px; height: 24px"></div>
            <!-- 删除按钮 -->
            <div style="width: 24px; height: 24px"></div>
          </div>
        </div>

        <div class="schema-node_row" :key="`value-${currentIndex}-${new Date().getTime()}`">
          <div class="schema-node_row_name">
            <!-- 空白填充 -->
            <p :style="{
              width:
                jsonSchemaTool.getEmptyWidth(
                  jsonSchemaTool.isComplexType(jsonSchemaTool.getDictValue(currentSchema), 0, 1, 4) ? currentIndex + 1 : currentIndex + 2,
                  currentSchema,
                  writable,
                  'item'
                ) + 'px',
            }"></p>
            <div class="schema-node-field_input_bg" :class="{ 'schema-node_disabled': !writable }">
              <div class="schema-node-field_input_bg_bgItem">
                <!-- 非叶子节点节点展开符号 -->
                <div v-if="
                  jsonSchemaTool.isComplexType(jsonSchemaTool.getDictValue(currentSchema), 0, 1, 4)
                  // || currentSchema.value.$ref
                " class="schema-node-expand-icon" :class="{ 'schema-node-expand-icon-active': itemExpand }"
                  @click="itemExpand = !itemExpand"></div>

                <!-- 节点名称 -->
                <!-- <div class="schema-node-text">
                  <div class="schema-node-text-wrapper">
                    <el-popover popper-class="common-popover" placement="top-end" title="" trigger="hover">
                      <p>{{ currentIndex }}</p>
                      <p>{{ currentSchemaComputed }}</p>
                      <el-tag slot="reference" size="mini">VALUE</el-tag>
                    </el-popover>
                  </div>
                </div> -->

                <!-- 节点名称 -->
                <div class="schema-node-text">
                  <div class="schema-node-text-wrapper">
                    <el-tag size="mini">V</el-tag>
                  </div>
                </div>

              </div>
            </div>
          </div>

          <!-- 节点类型 -->
          <div class="schema-node_row_schemaType">
            <el-popover :ref="`type-value-${currentNameComputed}`" popper-class="common-popover" placement="right"
              trigger="click" @show="handleShowType(`type-value-${currentNameComputed}`)">

              <template v-if="jsonSchemaTool.getDictKeyAndValueType(currentSchema).valueType == 'ref'">
                <TypeForm :ref="`${currentNameComputed}FormRef-value`"
                  :popoverRef="`typeSenior-value-${currentNameComputed}`"
                  :formRef="`${currentNameComputed}FormRef-value`" :parentSchema.sync="parentSchemaComputed"
                  :currentSchema.sync="currentSchema.patternProperties[jsonSchemaTool.getDictKey(currentSchemaComputed)]"
                  :currentIndex="currentIndex" :isGlobalModule="isGlobalModule" :currentName="currentNameComputed"
                  :isArrayItems="'value'" :treeData="treeData" :globalTreeData="globalTreeData"
                  @updatePopoverPos="updatePopoverPos" @updateSchemaContent="updateSchemaContent"
                  @updateSchemaWhenQuote="updateSchemaWhenQuote" @updateSchemaStructure="handleChangeType">
                </TypeForm>
              </template>

              <template v-else>
                <el-menu
                  @select="(index) => handleChangeType(index, `type-value-${currentNameComputed}`, `typeSenior-value-${currentNameComputed}`, `${currentNameComputed}FormRef-value`)"
                  :default-active="jsonSchemaTool.getDictKeyAndValueType(currentSchema).valueType">
                  <el-menu-item v-for="(item, index) in list3" :index="item.value" :key="item.id">
                    {{ item.name }}
                  </el-menu-item>
                </el-menu>
              </template>

              <div slot="reference" class="schema-node-schema-type_typeSelect"
                :style="{ cursor: !writable ? 'not-allowed' : 'pointer' }">
                <span :class="jsonSchemaTool.getDictKeyAndValueType(currentSchema).valueType + '-text'">
                  <!-- 区分引用类型和普通的类型 -->
                  <span>{{
                    jsonSchemaTool.getDictKeyAndValueType(currentSchema).valueType == "ref"
                      ? jsonSchemaTool.analysisSchemaRef(jsonSchema,
                        jsonSchemaTool.getDictValue(currentSchema).$ref).name
                      : jsonSchemaTool.getDictKeyAndValueType(currentSchema).valueType
                  }}</span>
                  <span v-if="currentSchema.patternProperties[jsonSchemaTool.getDictKey(currentSchemaComputed)].format">
                    {{ "<" + currentSchema.patternProperties[jsonSchemaTool.getDictKey(currentSchemaComputed)].format
                      + ">" }} </span>
                  </span>
              </div>
            </el-popover>
            <!-- 高级设置按钮（如果当前节点是 引用类型或者number或者integer类型才显示高级设置按钮） -->
            <el-popover :ref="`typeSenior-value-${currentNameComputed}`" popper-class="common-popover dataType-popover"
              placement="right" trigger="click" title="数据类型" slot="reference" @after-enter="
                showPopover(`${currentNameComputed}FormRef-value`)
                " @hide="hidePopover(`${currentNameComputed}FormRef-value`)">
              <TypeForm :ref="`${currentNameComputed}FormRef-value`"
                :popoverRef="`typeSenior-value-${currentNameComputed}`" :formRef="`${currentNameComputed}FormRef-value`"
                :parentSchema.sync="parentSchemaComputed"
                :currentSchema.sync="currentSchema.patternProperties[jsonSchemaTool.getDictKey(currentSchemaComputed)]"
                :currentIndex="currentIndex" :isGlobalModule="isGlobalModule" :currentName="currentNameComputed"
                :isArrayItems="'value'" :treeData="treeData" :globalTreeData="globalTreeData"
                @updatePopoverPos="updatePopoverPos" @updateSchemaContent="updateSchemaContent"
                @updateSchemaWhenQuote="updateSchemaWhenQuote" @updateSchemaStructure="handleChangeType">
              </TypeForm>

              <div
                v-if="jsonSchemaTool.displayAdvanced(currentSchema.patternProperties[jsonSchemaTool.getDictKey(currentSchemaComputed)])"
                slot="reference" class="schema-node-type_morder-type">
                <el-tooltip content="高级设置" placement="top">
                  <div class="schema-node-schema-check_box">
                    <span role="img" class="appIcon">
                      <svg-icon icon-class="advanced-setting" width="14" height="14" />
                    </span>

                  </div>
                </el-tooltip>

              </div>

              <div v-else slot="reference" style="width: 0px; height: 0px;"></div>
            </el-popover>
          </div>

          <!-- 中文名部分 -->
          <div class="schema-node-row_title">
            <div class="schema-node-text">
              <div class="schema-node-text-wrapper">
                <input class="schema-node-text-input schema-node-input_disabled" value="VALUE" disabled="disabled" />
              </div>
            </div>
          </div>
          <!-- 说明部分 -->
          <div class="schema-node-row_description">
            <div class="schema-node-text">
              <div class="schema-node-text-wrapper">
                <input class="schema-node-text-input schema-node-input_disabled" value="VALUE" disabled="disabled" />
              </div>
            </div>
          </div>

          <!-- 操作按钮部分 -->
          <div class="schema-node-row_operation">
            <!-- 新增按钮 -->
            <template v-if="
              writable &&
              jsonSchemaTool.isComplexType(currentSchema.patternProperties[jsonSchemaTool.getDictKey(currentSchemaComputed)], 1, 2)
            ">
              <!-- 子节点、引用模型 -->
              <el-popover placement="top-end" title="" trigger="hover">
                <div class="dropdown-menu">
                  <div class="menu-item mx-1" v-for="ele in list7" :key="ele.id" @click="handleMenuClick(ele.id)">
                    {{ ele.name }}
                  </div>
                </div>

                <div slot="reference" class="operation-btn dropdown-trigger-add">
                  <span role="img" class="appIcon" style="margin-right: 5px">
                    <svg-icon icon-class="new" width="20" height="20" @click="handleMenuClick(2)" />
                  </span>
                </div>
              </el-popover>
            </template>
            <div v-else style="width: 24px; height: 24px"></div>
            <!-- 删除按钮 -->
            <div style="width: 24px; height: 24px"></div>
          </div>
        </div>
        <Gradient v-if="jsonSchemaTool.contentExist(jsonSchemaTool.getDictValue(currentSchema)) && itemExpand"
          :currentSchema.sync="currentSchema.patternProperties[jsonSchemaTool.getDictKey(currentSchemaComputed)]"
          :parentSchema.sync="currentSchemaComputed" :isGlobalModule="isGlobalModule" :treeData="treeData"
          :globalTreeData="globalTreeData" :currentIndex="currentIndex + 1" :writable="writable">
        </Gradient>
      </template>
    </template>
    <ReferenceDialog v-if="showReferenceDialog" ref="referenceRef" :modelDataList="modelDataList"
      :isGlobalModule="isGlobalModule" @addReferenceModel="addReferenceModel"></ReferenceDialog>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import TypeForm from "./type-form.vue";
import ReferenceDialog from "./reference-dialog.vue";
import Editor from '@/components/Monacoeditor/index.vue'
import jsonSchemaToolHandle from "@/utils/jsonSchema-tool.js";
import { mapState } from "vuex";
import { v4 as uuidv4 } from "uuid";
const SCHEMA_UPDATE_TYPE = {
  COMMON: 'common',
  ARRAY_ITEM: 'item',
  PATTERN_VALUE: 'value',
  PATTERN_KEY: 'key',
  ROOT: '根节点',
  ROOT_EN: 'ROOT'
};
export default {
  name: "Gradient",
  data() {
    return {
      clickDel: false, // 是否点击了删除按钮
      current1: "dataType", // 当前选择展示的是数据类型还是jsonschema
      jsonSchemaTool: null,
      jsonSchema: null, // 当前模型的全量jsonSchema数据
      oldCurrentName: null, // 旧的当前节点名称
      addRefPos: 1, // 新增引用数据模型的位置,1:同级,2:内部
      contentExpend: true, // 节点内容是否展开
      itemExpand: true, // 数组类型的item是否展开
      showReferenceDialog: false, // 展示引用模型弹窗
      modelDataList: [],
      currentSelectedQuoteData: [], // 当前选中的引用数据模型
      opts: {
        value: "",
        language: "json", // 语言类型
        theme: "vs", // 编辑器主题
      },
    };
  },
  props: {
    curNode: {
      type: Object,
    }, // 当前选择的数据模型的节点
    currentName: {
      type: String,
    },
    currentSchema: {
      type: Object,
    },
    parentSchema: {
      type: Object,
    },
    parentSchemaIsRef: {
      type: Object,
    },
    currentIndex: {
      type: Number,
    },
    writable: {
      type: Boolean,
    },
    isReadonly: {
      type: Boolean,
      default: false,
    },
    treeData: {
      type: Array,
      default: () => [],
    },
    isGlobalModule: {
      type: Boolean,
      default: false,
    }, // 是否全局数据模型模块调用
    globalTreeData: {
      type: Array,
    },
  },
  components: {
    draggable,
    TypeForm,
    ReferenceDialog,
    Editor
  },
  computed: {
    ...mapState({
      modelMenuList: (state) => state.modelManageTool.moduleMenuList,
      list1: (state) => state.model_scenario.menu_list.list1,
      list2: (state) => state.model_scenario.menu_list.list2,
      list3: (state) => state.model_scenario.menu_list.list3,
      list6: (state) => state.model_scenario.menu_list.list6,
      list7: (state) => state.model_scenario.menu_list.list7,
    }),
    dragableArr: {
      get() {
        return this.jsonSchemaTool.schemaProperties(this.currentSchema);
      },
      set(newValue) {
        let schema = { ...this.currentSchema };
        schema["x-apifox-orders"] = newValue;
        // 更新当前节点的数据
        this.$emit("update:currentSchema", schema);
      },
    },
    currentSchemaComputed: {
      get() {
        return { ...this.currentSchema };
      },
      set(newValue) {
        // 更新当前节点的数据
        this.$emit("update:currentSchema", newValue);
      },
    },
    parentSchemaComputed: {
      get() {
        return { ...this.parentSchema };
      },
      set(newValue) {
        // 更新父节点的数据
        this.$emit("update:parentSchema", newValue);
      },
    },
    currentNameComputed: {
      get() {
        return this.currentName;
      },
      set(newValue) {
        this.$emit("update:currentName", newValue);
      },
    },
  },
  created() {
    // 初始化工具类对象，因为要直接在html中使用，所以得在data中声明，否则定义全局变量的话，会导致报错未定义
    this.jsonSchemaTool = new jsonSchemaToolHandle(this);
    this.modelDataList = JSON.parse(localStorage.getItem("modelDataList")) || [];
    // 当前选择的准备引用的数据
    this.currentSelectedQuoteData = JSON.parse(localStorage.getItem("currentSelectedQuoteData")) || [];
    this.jsonSchema = this.modelDataList.concat(JSON.parse(localStorage.getItem("globalTreeData"))).concat(this.currentSelectedQuoteData);
  },
  mounted() {
    this.$store.dispatch("setSystemDefaultStye");
    const refWrapperDomList = document.getElementsByClassName("ref-wrapper");
    Array.prototype.forEach.call(refWrapperDomList, (dom) => {
      if (refWrapperDomList.length == 1) {
        // 只有一个引用
        this.jsonSchemaTool.addMouseEventListeners(dom);
        if (dom.id.includes(`ref-wrapper-${this.currentIndex}-`)) {
          this.jsonSchemaTool.dragDomStyle(dom, this.currentIndex);
        }
      } else {
        // 多个引用
        if (dom.id.includes(`ref-wrapper-${this.currentIndex}-`)) {
          this.jsonSchemaTool.addMouseEventListeners(dom);
          this.jsonSchemaTool.dragDomStyle(dom, this.currentIndex);
        }
      }
    });
    // this.nodeInputDom = document.getElementById(
    //   this.currentName + this.currentIndex + "nodeNameRef"
    // );
    // console.log("this.nodeInputDom", this.nodeInputDom);
    // this.nodeInputDom?.addEventListener("focus", this.handleFocusName);
    // this.nodeInputDom?.addEventListener("blur", this.handleBlurName);
  },

  methods: {
    handleChangeExpand() {
      this.contentExpend = !this.contentExpend;
    },
    // 鼠标拖拽开始事件
    dragStart(e) { },
    // 鼠标拖拽更新位置的事件
    dragUpdate(e) { },
    // 鼠标拖拽中的事件，在这可以阻止拖拽
    dragMove(e) { },
    // 鼠标拖拽结束事件
    dragEnd(e) { },
    //更新当前节点的schema
    updateSchemaContent(isArrayItems, key, value) {
      if (value === undefined || value === null) {
        // 删除属性
        const newSchema = { ...this.currentSchemaComputed };
        delete newSchema[key];
        this.currentSchemaComputed = newSchema;
      } else {
        // 添加/更新属性
        if (isArrayItems == "item") {
          this.currentSchemaComputed = {
            ...this.currentSchemaComputed,
            items: {
              ...this.currentSchemaComputed.items,
              [key]: value,
            },
          };
        } else if (isArrayItems == "value") {
          this.currentSchemaComputed = {
            ...this.currentSchemaComputed,
            patternProperties: {
              [this.jsonSchemaTool.getDictKey(this.currentSchemaComputed)]: {
                ...this.jsonSchemaTool.getDictValue(this.currentSchemaComputed),
                [key]: value,
              }
            }
          }
        } else {
          this.currentSchemaComputed = {
            ...this.currentSchemaComputed,
            [key]: value,
          };
        }
      }
    },

    /**
     * 全局更新父级Schema的方法(节点类型切换为引用时)
     * @param {string} referenceIdentifier - 引用标识符（globalDefinitions/definitions）
     * @param {object} data - 包含引用的数据对象
     * @param {string} updateType - 更新类型 (SCHEMA_UPDATE_TYPE中的值)
     */
    updateSchemaWhenQuote(referenceIdentifier, key, data, updateType) {
      // 更新父级Schema
      if (updateType === SCHEMA_UPDATE_TYPE.COMMON) {
        this.parentSchemaComputed = this.getUpdatedParentSchemaWhenQuote(
          this.parentSchemaComputed,
          referenceIdentifier,
          key,
          data,
        );
      } else {
        // 更新当前Schema
        this.currentSchemaComputed = this.getUpdatedCurrentSchemaWhenQuote(
          this.currentSchemaComputed,
          referenceIdentifier,
          data,
          updateType
        );
      }
    },

    /**
   * 根据类型获取更新后的当前Schema
   */
    getUpdatedCurrentSchemaWhenQuote(currentSchema, referenceIdentifier, data, updateType) {
      const schemaReference = { $ref: `#/${referenceIdentifier}/${data.id}` };
      if (updateType === SCHEMA_UPDATE_TYPE.ARRAY_ITEM) {
        return { ...currentSchema, items: schemaReference };
      }

      if (updateType === SCHEMA_UPDATE_TYPE.PATTERN_VALUE) {
        return {
          ...currentSchema,
          patternProperties: {
            [this.jsonSchemaTool.getDictKey(currentSchema)]: schemaReference
          }
        };
      }
    },

    /**
     * 根据类型获取更新后的父级Schema
     */
    getUpdatedParentSchemaWhenQuote(parentSchema, referenceIdentifier, key, data) {
      const schemaReference = { $ref: `#/${referenceIdentifier}/${data.id}` };
      if (key == SCHEMA_UPDATE_TYPE.ROOT || key == SCHEMA_UPDATE_TYPE.ROOT_EN) {
        return schemaReference;
      } else {
        return {
          ...parentSchema,
          properties: {
            ...parentSchema.properties,
            [key]: schemaReference
          }
        };
      }
    },

    // 对象没有子节点时下面的添加按钮回调
    handleAdd() {
      const newPropertyName = uuidv4().split("-").join("").toUpperCase().substring(0, 26);
      // 添加子节点
      this.parentSchemaComputed = {
        ...this.parentSchemaComputed,
        'x-apifox-orders': [...(this.parentSchemaComputed["x-apifox-orders"] || []), newPropertyName],
        required: [...(this.parentSchemaComputed.required || []), newPropertyName],
        properties: {
          ...this.parentSchemaComputed.properties,
          [newPropertyName]: { "x-tmp-pending-properties": true }
        }
      };
    },
    // 点击新增按钮的菜单项
    handleMenuClick(id) {
      switch (id) {
        case 1:
          // 新增相邻节点
          const newPropertyName1 = uuidv4()
            .split("-")
            .join("")
            .toUpperCase()
            .substring(0, 26);
          this.parentSchemaComputed = {
            ...this.parentSchemaComputed,
            'x-apifox-orders': [...(this.parentSchemaComputed["x-apifox-orders"] || []), newPropertyName1],
            required: [...(this.parentSchemaComputed.required || []), newPropertyName1],
            properties: {
              ...this.parentSchemaComputed.properties,
              [newPropertyName1]: { "x-tmp-pending-properties": true }
            }
          };
          break;
        case 2:
          // 新增子节点
          const uuid = uuidv4().split("-").join("").toUpperCase().substring(0, 26);
          const newPropertyName2 = uuidv4().split("-").join("").toUpperCase().substring(0, 26);
          // 数组的items新增子节点
          if (this.currentSchemaComputed.items) {
            if (this.jsonSchemaTool.isComplexType(this.currentSchemaComputed.items, 2)) {
              // 数组的items一开始是个引用类型，点击新增子节点后变成object类型
              const ref = JSON.parse(JSON.stringify(this.currentSchemaComputed.items));
              delete this.currentSchemaComputed.items.$ref;
              this.$set(this.currentSchemaComputed.items, "type", "object");
              this.$set(this.currentSchemaComputed.items, "properties", {});
              this.$set(this.currentSchemaComputed.items, "x-apifox-orders", [uuid,]);
              this.$set(this.currentSchemaComputed.items, "x-apifox-refs", { [uuid]: { ...ref, "x-apifox-overrides": {} } });
            }
            // 数组的items是object类型
            const newItems = {
              ...this.currentSchemaComputed.items,
              'x-apifox-orders': [...(this.currentSchemaComputed.items["x-apifox-orders"] || []), newPropertyName2],
              required: [...(this.currentSchemaComputed.items.required || []), newPropertyName2],
              properties: {
                ...this.currentSchemaComputed.items.properties,
                [newPropertyName2]: { "x-tmp-pending-properties": true }
              }
            };
            // 彻底更新引用
            const newSchema = { ...this.currentSchemaComputed, items: newItems };
            // 使用 $set 更新整个对象
            this.$set(this, 'currentSchemaComputed', newSchema);

          } else if (this.currentSchemaComputed.patternProperties) {
            if (this.jsonSchemaTool.getDictKeyAndValueType(this.currentSchemaComputed).valueType == "ref") {
              // 字典的value一开始是个引用类型，点击新增子节点后变成object类型
              const ref = JSON.parse(JSON.stringify(this.jsonSchemaTool.getDictValue(this.currentSchemaComputed)));
              delete this.jsonSchemaTool.getDictValue(this.currentSchemaComputed).$ref;
              this.$set(this.jsonSchemaTool.getDictValue(this.currentSchemaComputed), "type", "object");
              this.$set(this.jsonSchemaTool.getDictValue(this.currentSchemaComputed), "properties", {});
              this.$set(this.jsonSchemaTool.getDictValue(this.currentSchemaComputed), "x-apifox-orders", [uuid,]);
              this.$set(this.jsonSchemaTool.getDictValue(this.currentSchemaComputed), "x-apifox-refs", { [uuid]: { ...ref, "x-apifox-overrides": {} } });
            }
            // 字典的value是object类型新增子节点
            this.currentSchemaComputed = {
              ...this.currentSchemaComputed,
              patternProperties: {
                [this.jsonSchemaTool.getDictKey(this.currentSchemaComputed)]: {
                  ...this.jsonSchemaTool.getDictValue(this.currentSchemaComputed),
                  'x-apifox-orders': [...(this.jsonSchemaTool.getDictValue(this.currentSchemaComputed)["x-apifox-orders"] || []), newPropertyName2],
                  required: [...(this.jsonSchemaTool.getDictValue(this.currentSchemaComputed).required || []), newPropertyName2],
                  properties: {
                    ...this.jsonSchemaTool.getDictValue(this.currentSchemaComputed).properties,
                    [newPropertyName2]: { "x-tmp-pending-properties": true }
                  },
                }
              }
            }
          } else {
            // 引用属性新增子节点
            if (
              this.jsonSchemaTool.isComplexType(this.currentSchemaComputed, 2)
            ) {
              const ref = JSON.parse(
                JSON.stringify(this.currentSchemaComputed)
              );
              delete this.currentSchemaComputed.$ref;
              this.$set(this.currentSchemaComputed, "type", "object");
              this.$set(this.currentSchemaComputed, "properties", {});
              this.$set(this.currentSchemaComputed, "x-apifox-orders", [uuid]);
              this.$set(this.currentSchemaComputed, "x-apifox-refs", {
                [uuid]: {
                  ...ref,
                  "x-apifox-overrides": {},
                },
              });
            }
            // 添加子节点
            this.currentSchemaComputed = {
              ...this.currentSchemaComputed,
              'x-apifox-orders': [...(this.currentSchemaComputed["x-apifox-orders"] || []), newPropertyName2],
              required: [...(this.currentSchemaComputed.required || []), newPropertyName2],
              properties: {
                ...this.currentSchemaComputed.properties,
                [newPropertyName2]: { "x-tmp-pending-properties": true }
              }
            };
            this.$nextTick(() => {
              const isRootNode = this.currentIndex === 1 && ["根节点", "ROOT"].includes(this.currentName);
              this.parentSchemaComputed = isRootNode
                ? this.currentSchemaComputed  // 根节点直接赋值
                : {
                  ...this.parentSchemaComputed,
                  properties: {
                    ...this.parentSchemaComputed.properties,
                    [this.currentNameComputed]: this.currentSchemaComputed // 直接引用已更新的对象
                  }
                };
            });
          }
          break;
      }
    },
    // 提取为数据模型
    dataModelExtract() { },
    // 点击删除节点按钮
    handleDeleteNode() {
      if (!this.clickDel) {
        this.clickDel = !this.clickDel;
        setTimeout(() => {
          this.clickDel = !this.clickDel;
        }, 2000);
        return;
      }
      delete this.parentSchemaComputed["properties"][this.currentName];
      if (this.parentSchemaComputed["x-apifox-orders"] != undefined) {
        this.parentSchemaComputed["x-apifox-orders"].splice(
          this.parentSchemaComputed["x-apifox-orders"].indexOf(
            this.currentName
          ),
          1
        );
      }
      if (this.parentSchemaComputed["required"] != undefined) {
        this.parentSchemaComputed["required"].splice(
          this.parentSchemaComputed["required"].indexOf(this.currentName),
          1
        );
        // if (this.parentSchemaComputed["required"].length == 0) {
        //   delete this.parentSchemaComputed["required"];
        // }
      }
      this.parentSchemaComputed = {
        ...this.parentSchemaComputed,
      };
    },
    // 点击删除引用
    handleDeleteRef() {
      Object.keys(this.parentSchemaComputed["x-apifox-refs"]).forEach(
        (item) => {
          if (
            this.parentSchemaComputed["x-apifox-refs"][item]["$ref"] !=
            this.currentSchemaComputed.$ref
          )
            return;
          delete this.parentSchemaComputed["x-apifox-refs"][item];
          this.parentSchemaComputed["x-apifox-orders"].splice(
            this.parentSchemaComputed["x-apifox-orders"].indexOf(item),
            1
          );
          this.parentSchemaComputed["required"].splice(
            this.parentSchemaComputed["required"].indexOf(item),
            1
          );
        }
      );
    },
    // 点击解除引用
    removeRef() {
      const ref = this.currentSchemaComputed.$ref;
      const refData = this.jsonSchemaTool.analysisSchemaRef(
        this.jsonSchema,
        ref
      )["value"];
      if (this.parentSchemaComputed.items != undefined) {
        // 数组的items解除引用
        this.parentSchemaComputed = {
          ...this.parentSchemaComputed,
          items: {
            ...refData,
            "x-apifox-refs": {},
          },
        };
      } else if (this.parentSchemaComputed.value != undefined) {
        // 字典的value解除引用
        this.parentSchemaComputed = {
          ...this.parentSchemaComputed,
          value: {
            ...refData,
            "x-apifox-refs": {},
          },
        };
      } else {
        if (this.currentIndex == 1) {
          if (this.currentName == "根节点" || this.currentName == "ROOT") {
            this.parentSchemaComputed = {
              ...refData,
              "x-apifox-refs": {},
            };
          } else {
            const orders = this.parentSchemaComputed["x-apifox-orders"];
            const propertiesKeys = Object.keys(
              this.parentSchemaComputed["properties"]
            );
            const deleteEle = orders.filter(
              (item) => !propertiesKeys.includes(item)
            )[0];
            delete this.parentSchemaComputed["x-apifox-refs"][deleteEle];
            this.parentSchemaComputed["x-apifox-orders"].splice(
              this.parentSchemaComputed["x-apifox-orders"].indexOf(deleteEle),
              1
            );
            this.parentSchemaComputed = {
              ...this.parentSchemaComputed,
              properties: {
                ...this.parentSchemaComputed["properties"],
                ...refData["properties"],
              },
              "x-apifox-orders": this.parentSchemaComputed[
                "x-apifox-orders"
              ].concat(refData["x-apifox-orders"]),
              required: this.parentSchemaComputed["required"].concat(
                refData["required"]
              ),
            };
          }
        } else {
          if (
            this.parentSchemaComputed["x-apifox-refs"] != undefined &&
            Object.keys(this.parentSchemaComputed["x-apifox-refs"]).length > 0
          ) {
            // 同一层级引用
            const deleteRefKey = Object.keys(
              this.parentSchemaComputed["x-apifox-refs"]
            ).filter(
              (item) =>
                this.parentSchemaComputed["x-apifox-refs"][item]["$ref"] == ref
            );
            const orders = this.parentSchemaComputed["x-apifox-orders"]
              .filter((item) => item != deleteRefKey)
              .concat(refData["x-apifox-orders"]);
            const required = this.parentSchemaComputed["required"].concat(
              refData["required"]
            );
            delete this.parentSchemaComputed["x-apifox-refs"][deleteRefKey];
            // this.$set(this.parentSchemaComputed, "properties", {
            //   ...this.parentSchemaComputed["properties"],
            //   ...refData.properties,
            // });
            // this.$set(this.parentSchemaComputed, "x-apifox-orders", orders);
            // this.$set(this.parentSchemaComputed, "required", required);
            this.parentSchemaComputed = {
              ...this.parentSchemaComputed,
              properties: {
                ...this.parentSchemaComputed["properties"],
                ...refData.properties,
              },
              "x-apifox-orders": orders,
              required: required,
              "x-apifox-refs": {},
            };
          } else {
            // 内部引用
            delete this.currentSchemaComputed["$ref"];
            this.currentSchemaComputed = {
              ...refData,
            };
            this.parentSchemaComputed = {
              ...this.parentSchemaComputed,
              properties: {
                ...this.parentSchemaComputed["properties"],
                [this.currentNameComputed]: {
                  ...refData,
                },
              },
            };
          }
        }
      }
    },
    // 点击跳转编辑引用模型
    handleEditSchema() {
      const nodeId = this.currentSchemaComputed["$ref"].split("/")[2];
      const definitionsFlag = this.currentSchemaComputed["$ref"].split("/")[1]
      const fieldFlag = definitionsFlag == "globalDefinitions" ? "globalDataId" : "modelDataId"
      // 判断是否跳转到其他页面
      if (!this.isGlobalModule && definitionsFlag == "globalDefinitions") {
        // 前往全局数据模型页面
        this.$store.commit("modelManageTool/SET_SELECTED_NODE_ID", { moduleName: 'globalData', id: nodeId })
        this.$store.commit("modelManageTool/SET_EXPANDED_NODE_IDS", { moduleName: 'globalData', idList: Array.from(this.jsonSchemaTool.getAncestorIds(JSON.parse(localStorage.getItem("globalTreeData")), nodeId)) })
        this.$store.commit("homePage/SET_CURRENT_MENU", this.modelMenuList[1]);
        this.$router.push({ name: "globalDataModel" })
      } else {
        this.$nextTick(() => this.$EventBus.$emit("editSchema", fieldFlag, nodeId));
      }

    },
    // 节点类型切换
    handleChangeType(type, ref, popoverRef, formRef) {
      if (type === "quote") {
        this.$nextTick(() => {
          this.$refs[ref].doClose();
          this.$refs[popoverRef].doShow();
          if (this.$refs[formRef]) {
            this.$refs[formRef].isQuote = true;
          }
        });
      } else {
        const sign =
          ref.indexOf("item") != -1
            ? "item"
            : ref.indexOf("key") != -1
              ? "key"
              : ref.indexOf("value") != -1
                ? "value"
                : "common";
        const schema = JSON.parse(JSON.stringify(this.currentSchemaComputed));
        const updateSchema = {
          ...this.jsonSchemaTool.handleChangeType(type, sign, schema),
        };
        if (
          this.currentIndex == 1 &&
          (this.currentNameComputed == "根节点" ||
            this.currentNameComputed == "ROOT")
        ) {
          this.parentSchemaComputed = {
            ...updateSchema,
          };
        } else {
          this.parentSchemaComputed =
            this.parentSchemaComputed.patternProperties != undefined  // 字典
              ? {
                ...this.parentSchemaComputed,
                patternProperties: {
                  [this.jsonSchemaTool.getDictKey(this.parentSchemaComputed)]: {
                    ...updateSchema
                  }
                }
              }
              : this.parentSchemaComputed.items != undefined  // 数组
                ? { ...this.parentSchemaComputed, "items": { ...updateSchema } }
                : {                                           // 其他
                  ...this.parentSchemaComputed,
                  properties: {
                    ...this.parentSchemaComputed["properties"],
                    [this.currentNameComputed]: { ...updateSchema },
                  },
                };
        }
        this.$forceUpdate();
        this.currentSchemaComputed = { ...updateSchema };
      }
      this.$nextTick(() => {
        this.jsonSchemaTool.closePopover(popoverRef);
      });

    },
    // 监听点击节点类型弹出popover事件
    handleShowType(ref) {
      if (!this.writable || this.isReadonly) {
        // 如果是引用，就阻止popover的弹出
        this.$refs[ref].doClose();
      }
    },
    // 监听popover弹框打开的方法
    showPopover(formRef) {
      const that = this;
      const dom = document.getElementById("jd-m-c-box");
      dom.addEventListener("scroll", function () {
        that.jsonSchemaTool.closePopover();
      });
      if (this.$refs[formRef]) {
        this.$nextTick(() => {
          this.$refs[formRef].init();
        });
      }
    },
    // 更新popover弹框的位置，防止超出界面导致出现滚动条不美观
    updatePopoverPos(popoverRef) {
      this.jsonSchemaTool.updatePopoverPos(popoverRef);
    },
    // 关闭popover弹框
    hidePopover(formRef) {
      // const formData = this.$refs[formRef].form;
    },
    // 是否必填操作
    handleRequired() {
      if (
        this.jsonSchemaTool.isRequired(
          this.parentSchemaComputed,
          this.currentNameComputed
        )
      ) {
        // 已必填，取消必填
        this.parentSchemaComputed = {
          ...this.parentSchemaComputed,
          required: this.parentSchemaComputed["required"].filter(
            (ele) => ele != this.currentNameComputed
          ),
        };
      } else {
        // 未必填，设置必填
        if (this.parentSchemaComputed["required"] == undefined) {
          // 父节点的required不存在，则创建
          this.parentSchemaComputed = {
            ...this.parentSchemaComputed,
            required: [this.currentNameComputed],
          };
        } else {
          // 父节点的required存在，则添加当前节点
          this.parentSchemaComputed = {
            ...this.parentSchemaComputed,
            required: [
              ...this.parentSchemaComputed["required"],
              this.currentNameComputed,
            ],
          };
        }
      }
    },
    // 允许为NULL操作(isItems代表了数组的元素)
    handleNullAble(isItems) {
      if (isItems) {
        this.currentSchemaComputed = {
          ...this.currentSchemaComputed,
          items: {
            ...this.currentSchemaComputed.items,
            type: Array.isArray(this.currentSchemaComputed.items.type)
              ? this.currentSchemaComputed.items.type[0]
              : [this.currentSchemaComputed.items.type, "null"],
          }
        };
      } else {
        this.currentSchemaComputed = {
          ...this.currentSchemaComputed,
          type: Array.isArray(this.currentSchemaComputed.type)
            ? this.currentSchemaComputed.type[0]
            : [this.currentSchemaComputed.type, "null"],
        };
      }

      // 更新父节点数据
      if (JSON.stringify(this.currentSchemaComputed) != JSON.stringify(this.parentSchemaComputed)) {
        setTimeout(() => {
          const newSchema = JSON.parse(JSON.stringify(this.parentSchemaComputed));
          newSchema.properties[this.currentNameComputed] = this.currentSchemaComputed;
          this.parentSchemaComputed = newSchema;
        }, 0)
      }

    },
    // 输入框获取焦点事件，存储上一次输入的数据
    handleFocusName(e) {
      this.oldCurrentName = e.target.value;
    },
    // 输入框失去焦点事件,更新节点名称
    handleBlurName(e) {
      const inputValue = e.target.value.trim(); // 无需 JSON.parse(JSON.stringify)
      console.log("修改节点名称", inputValue);
      if (inputValue === this.oldCurrentName) return;

      // 名称重复检查
      if (this.jsonSchemaTool.isCurrentNameRepeat(this.parentSchemaComputed, inputValue)) {
        e.target.value = this.oldCurrentName;
        this.$message.error("该名称已存在，请重新输入！");
        return;
      }

      // 处理临时节点
      if (this.jsonSchemaTool.isTempNode(this.currentSchema)) {
        const oldName = this.currentNameComputed;
        const newParent = { ...this.parentSchemaComputed };

        // 复制需要修改的字段
        newParent.properties = { ...newParent.properties };
        newParent["x-apifox-orders"] = [...(newParent["x-apifox-orders"] || [])];
        newParent.required = [...(newParent.required || [])];

        // 更新数据
        delete newParent.properties[oldName];
        newParent.properties[inputValue] = { type: "string" };

        const ordersIndex = newParent["x-apifox-orders"].indexOf(oldName);
        if (ordersIndex > -1) {
          newParent["x-apifox-orders"].splice(ordersIndex, 1, inputValue);
        }

        const requiredIndex = newParent.required.indexOf(oldName);
        if (requiredIndex > -1) {
          newParent.required.splice(requiredIndex, 1, inputValue);
        }

        this.parentSchemaComputed = newParent; // 触发响应式更新
        this.currentSchemaComputed = this.parentSchemaComputed.properties[inputValue]; // 更新当前schema为父schema值的引用
      }
      // 处理正式节点
      else {
        this.parentSchemaComputed = this.jsonSchemaTool.updateSchema({ ...this.parentSchemaComputed }, this.oldCurrentName, inputValue)
        this.currentSchemaComputed = this.parentSchemaComputed.properties[inputValue]; // 更新当前schema为父schema值的引用
      }
    },
    // 显示引用数据窗口
    handleShowReferenceDialog() {
      this.showReferenceDialog = true;
      this.$nextTick(() => {
        this.$refs.referenceRef.init();
      });
    },
    // 添加引用模型
    addReferenceModel(isSelectRefGlobal, key) {
      // 判断是否循环引用
      if (this.isGlobalModule == isSelectRefGlobal && this.curNode.id == key) {
        this.$modal.msgError("此处涉及循环引用，操作被拒绝！");
        return;
      }
      const definitions = isSelectRefGlobal ? "globalDefinitions" : "definitions";
      // 此处只涉及到替换当前的临时节点
      delete this.parentSchemaComputed.properties[this.currentNameComputed]
      this.parentSchemaComputed = {
        ...this.parentSchemaComputed,
        properties: {
          ...this.parentSchemaComputed.properties
        },
        "x-apifox-orders": [
          ...this.parentSchemaComputed["x-apifox-orders"]
        ],
        "x-apifox-refs": {
          ...this.parentSchemaComputed["x-apifox-refs"],
          [this.currentNameComputed]: { $ref: `#/${definitions}/${key}` }
        }
      };
    },

    // 中文名和说明输入框聚焦的事件
    handleFocusText(e, inputType, category) {
      // 确定要更新的目标对象
      let target;
      switch (category) {
        case SCHEMA_UPDATE_TYPE.COMMON:
          target = this.currentSchemaComputed;
          break;
        case SCHEMA_UPDATE_TYPE.ARRAY_ITEM:
          target = this.currentSchemaComputed.items;
          break;
        default:
          return null;
      }
      this.initFieldIfMissing(target, inputType);
    },

    // 初始化某个对象的字段（如果不存在）
    initFieldIfMissing(obj, field) {
      if (!obj[field]) {
        this.$set(obj, field, "");
      }
    },


    // 将公共逻辑提取为辅助方法
    updateSchemaField(schema, field, value) {
      if (value.trim() === '') {
        delete schema[field];
      } else {
        this.$set(schema, field, value.trim());
      }
    },

    // 更新父级schema
    updateParentSchemaTitleOrDescription() {
      if (this.currentIndex === 1 && (this.currentNameComputed === SCHEMA_UPDATE_TYPE.ROOT || this.currentNameComputed === SCHEMA_UPDATE_TYPE.ROOT_EN)) {
        this.parentSchemaComputed = { ...this.currentSchemaComputed };
      } else {
        this.parentSchemaComputed = {
          ...this.parentSchemaComputed,
          properties: {
            ...this.parentSchemaComputed.properties,
            [this.currentNameComputed]: this.currentSchemaComputed
          }
        };
      }
    },

    // 中文名和说明输入框失去焦点的事件
    handleBlurText(e, inputType, category) {
      // 确定要更新的目标对象
      let target;
      switch (category) {
        case SCHEMA_UPDATE_TYPE.COMMON:
          target = this.currentSchemaComputed;
          break;
        case SCHEMA_UPDATE_TYPE.ARRAY_ITEM:
          target = this.currentSchemaComputed.items;
          break;
        default:
          return;
      }

      // 更新字段
      this.updateSchemaField(target, inputType, e.target.value);

      // 更新当前和父级schema
      this.currentSchemaComputed = { ...this.currentSchemaComputed };
      this.updateParentSchemaTitleOrDescription();
    },

    // 内容改变自动获取值
    changeValue(val) {
      this.$refs["monaco"].getVal();
    },
  },
};
</script>

<style lang="scss">
.gradient-container {
  position: relative;

  .ref-wrapper {
    position: relative;
  }
}

.chosend {
  background-color: transparent !important;
  user-select: none !important;
}

.jsonschema-advance-setting {
  margin: 8px 16px;
  color: inherit;
  // width: 345px;
  position: relative;
  max-height: 450px;
  width: 450px;
  display: flex;
  flex-direction: column;

  .js-a-s-top {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
  }

  .js-a-s-content {
    flex-grow: 1;


    .js-a-s-content-editor {
      width: 100%;
      height: 100%;
      border: 1px solid var(--app-bg-300);
      box-sizing: border-box;

      .js-a-s-c-e-header {
        height: 38px;
        padding-right: 3px;
        box-sizing: border-box;
      }

      .js-a-s-c-e-editor-box {
        height: calc(450px - 38px);
      }
    }
  }
}
</style>
<style scoped>
.node-name ::v-deep .el-input__inner {
  width: 300px;
  height: 30px;
  border-radius: 8px;
  padding-left: 10px;
}

.el-menu {
  border-right: none;
  background-color: transparent;

  .el-menu-item {
    height: 35px;
    line-height: 35px;
    color: var(--ui-text-color);
    border-radius: 5px;
  }

  .el-menu-item:hover {
    background-color: var(--ui-item-hover-bg);
  }

  .el-menu-item:focus {
    background-color: var(--ui-menu-item-active-bg);
  }

  .el-menu-item.is-active {
    background-color: var(--ui-menu-item-active-bg);
  }
}
</style>